<template>
  <div class="tools px-15 pt-10 text-color-primary flex-row-sb">
    <slot name="left">
      <div class="left"></div>
    </slot>
    <div class="right">
      <van-icon
        v-for="(item, ind) in real_actions"
        :key="ind"
        :name="item"
        @click="handleEvent(item)"
        class="fs-20 ml-20"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, computed, defineEmits } from 'vue';

const props = defineProps({
  actions: {
    type: Array,
    default: ['search', 'add']
  }
});

const emits = defineEmits(['onActionsClick']);

const real_actions = computed(() => {
  return props.actions || [];
});

function handleEvent(type) {
  emits('onActionsClick', type);
}
</script>
<style scoped lang="scss"></style>
